<template>
  <div>
     <van-nav-bar :fixed="true" title="地图找房" left-arrow @click-left="$router.go(-1)" />
    <baidu-map
      :scroll-wheel-zoom="true"
      class="map"
      :center="location"
      :zoom="num"
      ak="YOUR_APP_KEY"
    >
      <bm-navigation
        :enableGeolocation="true"
      ></bm-navigation>
      <bm-scale></bm-scale>
      <bm-label
        v-for="(item, index) in mapList"
        :key="index"
        :content="item.label"
        :position="{ lng: item.coord.longitude , lat: item.coord.latitude }"
        @click="clickFn($event)"
        :labelStyle="{
          color: '#ccc',
          width: '60px',
          height: ' 60px',
          fontSize: '18px',
          textAlign: 'center',
          lineHeight: '60px',
          background: 'rgba(12,181,106,.9)',
          border: '2px solid hsla(0,0%,100%,.8)',
          borderRadius: '50%',
          cursor: 'pointer',
        }"
      />
    </baidu-map>
  </div>
</template>
<script>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
import { BmLabel, BmNavigation, BmScale } from 'vue-baidu-map'
import { baiduMap } from '@/api/other'
import { getStr } from '@/utils/storage'
export default {
  components: {
    BaiduMap,
    BmLabel,
    BmNavigation,
    BmScale
  },
  data () {
    return {
      mapList: [],
      location: '',
      num: 11
    }
  },
  async created () {
    this.location = JSON.parse(getStr()).label
    const res = await baiduMap(JSON.parse(getStr()).value)
    console.log(res)
    this.mapList = res.body
  },
  methods: {
    async clickFn (e) {
      console.log(e.target)
      const obj = this.mapList.find((item) => item.label === e.target.content)
      console.log(obj)
      const res = await baiduMap(obj.value)
      console.log(res.body)
      this.location = e.target.content
      this.mapList = res.body
      this.num += 1
    }
  }
}
</script>

<style>
.map {
  width: 100%;
  height: 670px;
}
</style>
